<template>
    <div class="">
        <!-- <div class="height90px" :class="{'height70px':buyBar.warnText}"></div> -->
        <div class="buy-wbottom width-full">
            <div class="buy-bottom displayFlex width-full flex-algin-center positionR">
                <div class="buy-warn" v-if="buyBar.warnText">{{buyBar.warnText}}</div>
                <div class="displayFlex flex-algin-center" v-if="!buyBar.noSelectBtn">
                    <img class="select-img" @click="selectAllFn" v-if="buyBar.selectAll" src="../../../assets/images/cart/cart_select.png" alt="">
                    <img class="select-img" @click="selectAllFn" v-else src="../../../assets/images/cart/cart_not_select.png" alt="">
                    <span class="select-all">全选</span>
                </div>
                <div class="flex1" :class="{'cart-money-warp':!buyBar.noSelectBtn}">
                    <p class="total-money">{{buyBar.payMoney.text}}:
                        <span class="cart-total-price">
                            <span class="money-unit">￥</span>
                            <span class="cart-total-money">{{Math.ceil(buyBar.payMoney.money * 100 ) / 100 || 0}}</span>
                        </span>
                    </p>
                    <span class="send-money" v-if="buyBar.shippingFee.isShow">(运费：{{buyBar.shippingFee.money || 0}}元)</span>
                    <span class="send-money" v-if="buyBar.deposit.isShow">尾款：￥{{buyBar.deposit.money || 0}}元</span>
                </div>
                <span class="pay-btn" @click="$emit('toPay')">
                    {{buyBar.btnText}}
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goodsBuyBar",
        props:{
            buyBarProp:Object
        },
        data(){
            return{
                buyBar:{
                    noSelectBtn:false,//是否不需要选择的按钮
                    selectAll:false,//是否全选
                    totalMoney:0,//总金额
                    payMoney:{
                        money:0,
                        text:'总额'
                    },//商品总金额
                    btnText:'结算',
                    deposit:{//尾款
                        isShow:false,
                        money:0,
                    },
                    shippingFee:{
                        isShow:false,
                        money:0,
                    },//邮费、配送费用
                    warnText:'',//提示信息 温馨提示：某某商品为定制商品，暂不支持退款！
                }
            }
        },
        mounted(){
            this.buyBar = Object.assign({},this.buyBar,this.buyBarProp);
        },
        methods:{
            selectAllFn(){
                this.buyBar.selectAll = !this.buyBar.selectAll;
                this.$emit('selectAllFn',this.buyBar.selectAll);
                this.$emit('isSelectAll',this.buyBar.selectAll);
            }
        },
        watch:{
            buyBarProp(val){
                this.buyBar = Object.assign({},this.buyBar,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .buy-wbottom{
        position: fixed;
        left: 0;
        bottom: 0;
        height: .6rem;
        z-index: 10;
    }
    .buy-bottom{
        padding: 0 .15rem;
        height: .6rem;
        background-color: #fff;
    }
    .iphonex-style-fixed.buy-bottom{
        height: 1.04rem;
    }
    .select-img{
        position: relative;
        width: .16rem;
        top: .01rem;
    }
    .send-money{
        font-size: .11rem;
        color: #666666;
    }
    .pay-btn{
        display: inline-block;
        width: 1.2rem;
        height: .4rem;
        text-align: center;
        line-height: .4rem;
        border-radius: .25rem;
        background-image: linear-gradient(to right,#9EBDFF,#5D89E8);
        font-size: .16rem;
        color: #fff;
    }
    .buy-warn{
        padding: 0 .15rem;
        background-color: #7DA6FF;
        color: #6578A1;
        height: .22rem;
        line-height: .22rem;
        font-size: .11rem;
        position: absolute;
        left: 0;
        top: 0;
        width: 3.75rem;
        transform: translateY(-100%);
    }
    .total-money{
        font-size: .14rem;
        color: #333333;
    }
    .money-unit{
        font-size: .11rem;
        font-weight: normal;
    }
    .cart-total-price{
        color: #FF3333;
        font-size: .15rem;
    }

    .select-all{
        padding-left: .05rem;
    }
    .cart-money-warp{
        padding-left: .15rem;
    }
    .cart-total-money{
        font-weight: bold;
    }
</style>